<template>
  <div class="form-box">
    <div class="card bg-light mb-3" style="max-width: 27rem;margin-top:10rem">
      <div class="card-header">
        <ul class="nav nav-pills justify-content-center">
          <li class="nav-item">
            <a class="nav-link active">登陆</a>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/register">注册</router-link>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <form v-on:submit.prevent="submitForm()">
          <div class="input-group mb-3 mr-sm-2">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <i class="fa fa-user-circle"></i>
              </div>
            </div>
            <input
              type="text"
              class="form-control"
              placeholder="Username"
              ref="username"
              required
              v-model="username"
              v-on:input="formValidate('username')"
            >
          </div>
          <div class="input-group mb-3 mr-sm-2">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <i class="fa fa-lock"></i>
              </div>
            </div>
            <input
              type="password"
              class="form-control"
              placeholder="Password"
              ref="password"
              required
              v-model="password"
              v-on:input="formValidate('password')"
            >
          </div>

          <div class="form-check mb-3">
            <input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="remember">
            <label class="form-check-label" for="exampleCheck1">Remember me</label>
          </div>

          <button type="submit" class="btn btn-info btn-block">Submit</button>
        </form>
      </div>
    </div>
    <div class="cover"></div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      remember:true
    };
  },
  watch:{
    "$store.getters.getUser":function(){
        //this.addLocaluserStatus();
    }
  },
  mounted(){
    this.addLocaluserStatus();
  },
  methods: {
    submitForm(){
      let userList=this.$store.getters.getUser;
      let isUser=[];
      for(let value of userList){
          if(value.username==this.username && value.password==this.password){
            isUser=value;
            break;
          }
      }
      if(isUser.length!=0){
        if(isUser.userStatus=='deny'){
          alert('此账户已被锁定，请好好反省吧！');
          return false;
        }
        if(this.remember){
          this.$store.commit("changeLoginStatus",isUser["id"]);
          this.setCookie(isUser['id'],isUser['username'],1);
        }
        alert("登陆成功，准备进入首页");
        this.$router.push("/");
      }else{      
        alert("用户名/密码有误！");
        return false;
      }      
    },
    formValidate(type) {
      if (type == "username"){
        if (this.username != "") {
          this.$refs.username.setCustomValidity("");
        } else {
          this.$refs.username.setCustomValidity("用户名不能为空！");
        }
      }
      if(type == "password"){
        if (this.password != "") {
          this.$refs.password.setCustomValidity("");
        }else{
          this.$refs.password.setCustomValidity("密码不能为空！");
        }
      }
    },
    setCookie(userId,userName,expires){
      let Days = expires;
      let exp = new Date();
      exp.setTime(exp.getTime() + Days*24*60*60*1000);
      document.cookie=`id=${userId};expires=${exp.toGMTString()}`;
      document.cookie=`username=${encodeURI(userName)};expires=${exp.toGMTString()}`;
    }, 
    addLocaluserStatus(){
      if(localStorage.getItem('newUserStatus')!=null){
        let localUserStatus=JSON.parse(localStorage.getItem('newUserStatus'));
        for(let item of localUserStatus){
          if(item.userStatus!='active'){
              this.$store.commit('addNewUserStatus',{id:item.userId,userStatus:item.userStatus});
          } 
        }
      }
    },
  }
};
</script>


<style scoped>
.form-box {
  width: 100%;
  height: 100vh;
  max-width: 420px;
  padding:15px;
  margin: 0 auto 0 auto;
}
.form-box .cover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #f8f8f8;  
}
</style>
